import { Button, Image, List, Space, Toast } from "antd-mobile";
import { isValidArr, navigateTo } from "@/utils";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { ListComp, RankItemComp, StageComp } from "@/components/pages/rank";

export default function () {
  const router = useRouter();

  const [type, setType] = useState(undefined);
  const [loading, setLoading] = useState(undefined);
  const [data, setData] = useState(undefined);
  const [self, setSelf] = useState(undefined);
  const [forward, setForward] = useState(undefined);

  useEffect(() => {
    (async () => {
      await handler.fetch();
    })()
  }, [])

  const handler = {
    fetch: async () => {
      Toast.show({icon: 'loading', content: '加载中'})

      const resp = await requewt(API.rank.entire)
      Toast.clear()
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
          </div>
        })
        return
      }

      setForward(resp?.data?.forward_list);
      setData(resp?.data?.lst);
      setSelf(resp?.data?.own);
    },
    lottery: async () => {
      await navigateTo(`/wheel`)
    },
    portal: async () => {
      await navigateTo(`/portal`)
    },
    back: async () => {
      router.back()
    }
  }

  return (
    <>
      <div className="position-center">
        <h2 className="header">游戏当期排行</h2>
        <StageComp data={data} self={self} />

        <ListComp data={data} self={self} />

        {
          self &&
          <RankItemComp self item={self} />
        }

        <div className="info">只显示前100名</div>

        {/*<div className="footer">*/}
        {/*  {*/}
        {/*    isValidArr(forward) &&*/}
        {/*    <Button className={`act-btn act-btn-bevel`} onClick={e => navigateTo(`/rank/past`)}>往期排名</Button>*/}
        {/*  }*/}

        {/*  <Button className={`act-btn act-btn-bevel`} onClick={e => navigateTo(`/rank/mine`)}>个人记录</Button>*/}
        {/*</div>*/}
      </div>


    </>
  )
}